<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>函数的封装</title>
</head>
<body>
<div></div>
<p></p>
<span></span>
<div></div>
<p></p>
<script>


   /* function select(selector){
        var obj = document.querySelectorAll(selector);
        //怎么实现链式编程，是一个对象要调用方法
        //让选择器的方法 让伪数组拥有each方法
        obj.each = function(callback){
            each(this,callback);
            //this是什么，看谁调用的方法
        }
        return obj;
    }
    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    }


    select('div,p').each(function(v){
        v.style.border = '2px solid deeppink';
    })*/

    /*function select(selector){
        var obj = document.querySelectorAll(selector);
        //遍历伪数组，处理伪数组函数
        obj.each = function(callback){
            each(this,callback);
            console.log(this);
        }
        return obj;
    }
    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    }
    select('div,p').each(function(v){
        v.style.border = '2px dotted yellowgreen';
    })//链式调用的引入
    */

   /*
    * 在上一节的基础上怎么能够完成链式编程，就是让选择函数继续具有调用方法的能力
    * 但是选择函数返回的是一个伪数组对象，怎么才能让伪数组具有each方法？
    *
    * */
    /*function select(selector){
        var obj = document.querySelectorAll(selector);
        obj.each = function(callback){
            each(this,callback);
        };
        return obj;
    }
    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    }

    select('p,div').each(function(v){
        v.style.border = '2px solid orange ';
    });*/

    function select(selector){
        var obj = document.querySelectorAll(selector);
        obj.each = function(callback){
            each(this,callback);
        };
        return obj;
    }

    function each(arr,callback){
        for(var i=0;i<arr.length;i++){
            callback(arr[i],i);
        }
    }

    select('div,p').each(function(v){
        v.style.border = '2px solid black';
    });

</script>
</body>
</html>